<!--
代码模板说明：
1.codeGenaratorExample 为例子用的实体名称，可批量替换掉
2.表单字段替换成自己业务的表单字段
3.请求地址自行替换
-->
<template>
  <div id="lap-app" v-loading="pFormLoading">
    <el-row class="lap-form-body">
      <!--基本表单信息-->
      <el-form ref="form" label-width="120px" :model="pFormData" :rules="rules">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="模拟器名称" prop="Name">{{
              pFormData.MockName
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-form-item label="调用方法">{{ mockInfo.Method }}</el-form-item>
        </el-col>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="描述" prop="Description">{{
              mockInfo.Description
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发起方" prop="Direct">
              {{
                pFormData.Direct === 0 ? "本系统" : "第三方系统"
              }}</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期" prop="CreateDate">{{
              pFormData.CreateDate
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="发送数据" prop="SendData">
              <el-button
                type="text"
                @click="() => onHandleCopy(pFormData.SendData)"
                class="copyBtn"
                >复制原文本</el-button
              >
              <json-view :data="sendData" :deep="2" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="接收数据" prop="ResponseData">
              <el-button
                type="text"
                @click="() => onHandleCopy(pFormData.ResponseData)"
                class="copyBtn"
                >复制原文本</el-button
              >
              <json-view :data="responseData" :deep="2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row class="lap-form-footer">
      <el-dropdown
        v-for="act in mockActionList"
        :key="act.ActionID"
        split-button
        type="warning"
        style="margin: 0px 5px"
        @click="() => onActionHandler(act)"
      >
        {{ act.ActionName }}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="() => onEditMockAction(act)"
            >编辑脚本</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-row>

    <!--动作按钮脚本编辑页面-->
    <el-dialog
      custom-class="lap-form-edit lap-dialog-full"
      title="交互按钮脚本配置"
      v-if="editVisibleMockScriptEdit"
      :visible.sync="editVisibleMockScriptEdit"
      :close-on-click-modal="false"
      :before-close="(done) => platBeforeCloseForm(done, 'formEditMockAction')"
      :append-to-body="true"
    >
      <MockActionEdit
        ref="formEditMockAction"
        :mockName="actionMockName"
        :dataId="editActionID"
        :mockSendDataGUID="pFormData.MockSendDataGUID"
        :sendData="sendData"
        :responseData="responseData"
      ></MockActionEdit>
    </el-dialog>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import jsonView from "vue-json-views";
const MockActionEdit = () => import("./MockActionEdit"); //编辑页面组件
export default {
  mixins: [$lap.FormView],
  name: "lap-app",
  components: { jsonView, MockActionEdit },
  data() {
    return {
      title: "", //页面标题
      pPageFunctionCode: "", //页面功能编码
      pFormData: {},
      sendData: {},
      responseData: {},
      /*表单校验规则 */
      rules: {},
      mockActionList: [],
      editVisibleMockScriptEdit: false,
      actionMockName: "",
      mockInfo: {},
    };
  },
  methods: {
    /**
     * 平台加载方法
     */
    platLoadData() {
      const that = this;
      if (that.dataId) {
        //编辑/查看模式下查询数据
        return $lap
          .post("/MYWS/MockHandler.ashx?type=GetMockSendDataById", {
            MockSendDataGUID: that.dataId,
          })
          .then((data) => {
            that.pFormData = data;
            that.sendData = { sendData: JSON.parse(data.SendData) };
            that.responseData = { responseData: JSON.parse(data.ResponseData) };

            that.loadMockInfo(that.pFormData.MockName);
            that.loadMockActionList(that.pFormData.MockName);
          });
      }
    },
    /**
     * 加载MockInfo信息
     */
    loadMockInfo(mockName) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=GetMockInfoData", {
          MockName: mockName,
        })
        .then((data) => {
          that.mockInfo = data || {};
        });
    },
    /**
     * 加载可交互按钮
     */
    loadMockActionList(mockName) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=GetMockRefActionList", {
          MockName: mockName,
        })
        .then((data) => {
          that.mockActionList = data;
        });
    },
    /**
     * 复制原始字符串
     */
    onHandleCopy(val) {
      const that = this;
      const clipboard = new Clipboard(".copyBtn", {
        text: function () {
          return val;
        },
      });
      clipboard.on("success", function (e) {
        that.$message("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", function (e) {
        that.$message("复制失败");
        clipboard.destroy();
      });
    },
    /**
     * 编辑模拟按钮脚本
     */
    onEditMockAction(row) {
      const that = this;
      that.editActionID = row.ActionID;
      that.actionMockName = row.MockName;
      that.editVisibleMockScriptEdit = true;
    },
    /**
     * 交互按钮请求
     */
    onActionHandler(row) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=MockActionSend", {
          ActionData: row,
          MockSendDataGUID: that.pFormData.MockSendDataGUID,
        })
        .then((data) => {
          that.$message.success("模拟请求发送成功！");
        });
    },
  },
};
</script>